<!-- 关于我 -->
<template>
  <view class="about">
    <like-fx ref="likeFx" :width="width" :height="height"></like-fx>

    <!-- 个人头像和姓名 -->
    <view class="logo-section u-flex u-row-center u-m-t-40">
      <u-avatar size="90" src="/static/my-avatar.png" shape="circle" />
    </view>
    <view class="u-text-center u-m-t-20">
      <text class="u-font-36 u-font-bold">张三</text>
    </view>

    <!-- 个人简介 -->
    <u-card class="u-m-t-30 u-m-l-30 u-m-r-30" title="个人简介">
      <view slot="body" style="color:#333;font-size:16px;">
        一名热爱编程的大学生，擅长前端与全栈开发，喜欢开源与技术分享。
      </view>
    </u-card>

    <!-- 项目介绍 -->
    <u-card class="u-m-t-20 u-m-l-30 u-m-r-30" title="项目介绍">
      <view slot="body" style="color:#333;font-size:16px;">
        本项目基于 House Life 进行二次开发，优化了界面体验，增加了个性化功能，旨在为用户带来更便捷的智慧社区体验。
      </view>
    </u-card>

    <!-- 联系方式 -->
    <u-card class="u-m-t-20 u-m-l-30 u-m-r-30" title="联系方式">
      <view slot="body">
        <view>
          <u-icon name="email" color="#01BEFF" size="28" class="u-m-r-10" />
          <view style="color:#333;display:inline-block;">邮箱：zhangsan@email.com</view>
        </view>
        <view class="u-m-t-10">
          <u-icon name="github" color="#01BEFF" size="28" class="u-m-r-10" />
          <view style="color:#333;display:inline-block;">GitHub：github.com/zhangsan</view>
        </view>
      </view>
    </u-card>

    <!-- 开发感言 -->
    <u-card class="u-m-t-20 u-m-l-30 u-m-r-30 u-m-b-40" title="开发感言">
      <view slot="body" style="color:#333;font-size:16px;">
        代码改变世界，热爱让一切变得更好！
      </view>
    </u-card>
  </view>
</template>

<script>
import LikeFx from '@/components/likeFx/likeFx.vue'
export default {
  components: {
    LikeFx
  },
  data() {
    return {
      animation_timer: null, // 动画定时器
      width: 375,
      height: 1920
    }
  },
  onLoad() {
    this._startLikeAnimation();
  },
  onUnload() {
    clearTimeout(this.animation_timer)
  },
  methods: {
    _startLikeAnimation() {
      this.animation_timer = setInterval(() => {
        this.$refs.likeFx.likeClick()
      }, 300)
    }
  }
}
</script>

<style>
.u-card__body,
.u-card__content,
.u-card__slot,
.u-card__text {
  color: #333 !important;
}
</style>

<style scoped>
	.align-center {
		text-align: center;
	}
	.titleZ{
		width: 750rpx;
		font-size: 42rpx;
		margin-top: 60rpx;
	}
	.contentZ{
		width: 650rpx;
		margin: 10rpx auto 0;
		text-align: left;
	}
  .about-bg {
    background-size: cover;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    flex-direction: column;
    color: #fff;
  }

  .edit-fixed {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 1024;
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
  }

  .detail-imgs image {
    width: 100%;
    float: left;
    /* height:400rpx; 不定高了*/
    border: 0;
    padding: 0;
    margin: 0
  }

  .share-img {
    position: fixed;
    padding: 10rpx;
    width: 100rpx;
    height: 100rpx;
    /* top: 680rpx; */
    bottom: 200rpx;
    right: 20rpx;
    z-index: 1024;
    opacity: 0.8;
    box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
    border: none;
  }

  .about {
    margin: 0;
    width: 100%;
    height: 100vh;
	padding-top: 20%;
    color: #fff;
    background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
    /* background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a); */
    background-size: 500% 500%;
    animation: gradientBG 15s ease infinite;
  }

  @keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

  .container {
    width: 100%;
    position: absolute;
    text-align: center;
  }

  .like-fx {
    position: fixed;
    right: 0;
    z-index: 1024;
    pointer-events: none;
    /* background-color: red; */
  }

  .logo-section {
    margin-top: 60rpx;
  }
</style>
